<template>
	<view>
		<!-- <u-navbar leftText=" " title=" ">
			<view class="u-nav-slot" slot="left">
				成都
				<image class="fanhui_icon" src="/static/img/fanhui.png" mode=""></image>
			</view>
			<view class="u-nav-slot" slot="center">
				<view class="searchbox" @click="clickto('/pages/searchpage/searchpage')">
					<image class="sousuo_icon" src="/static/img/sousuo.png" mode=""></image>
					搜索商品
				</view>
			</view>
		</u-navbar> -->

		<u-sticky offsetTop='0' customNavHeight='0' bgColor='#fff'>
			<u-status-bar></u-status-bar>
			<view class="searchbox" @click="clickto('/pages/searchpage/searchpage')">
				<image class="sousuo_icon" src="/static/img/sousuo.png" mode=""></image>
				搜索商品
			</view>
			<view class="tabbox">
				<u-tabs :list="list1" lineWidth="32rpx" lineColor="#FF7428" lineHeight='12rpx' :activeStyle="{
				            color: '#232323',
				            fontWeight: 'bold',
				            transform: 'scale(1.1)'
				        }" :inactiveStyle="{
				            color: '#707070',
				            transform: 'scale(1)',
							fontSize:'31.95rpx'
				        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 80rpx;" @click="tabsChange">
				</u-tabs>
			</view>

		</u-sticky>

		<view class="" style="width: 690rpx;padding: 24rpx 30rpx 28rpx;background-color: #fff;">
			<u-swiper :list="list" height='258rpx' bgColor='#fff' @click="clickswiper" keyName="pic"></u-swiper>
		</view>
		<u-notice-bar :text="text" direction='column' url="/pages/notice/notice"></u-notice-bar>
		<view class="container">
			<view class="flex jsb">
				<image class="w344 h145" @click="clickto('/pages/product/list?title=公司产品&type=4')" src="/static/img/gsc.png"
					mode=""></image>
				<image class="w344 h145" @click="clickto('/pages/product/list?title=合作产品&type=2')" src="/static/img/hez.png"
					mode=""></image>
			</view>
			<view class="probox">
				<view class="" v-for="(item,index) in prolist" :key="index">
					<proitem :pro="item"></proitem>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef MP
	const citySelector = requirePlugin('citySelector');
	const QQMapWX = require('../../common/qqmap-wx-jssdk.js');
	// #endif
	import {
		homeData,
		readConfig,
		getNoticeList,
		getTitleList,
		getBanner
	} from '@/api/home.js'
	import {
		getProductByCateGory
	} from '@/api/product.js'
	export default {
		data() {
			return {
				keyword: '',
				list: [],
				list1: [],
				paddingTop: 0,
				text1: ['品牌直营，平台担保，100%正品', '品牌直营，平台担保，100%正品'],
				prolist: [],
				addrname: '定位中',
				location: {},
				text: ['uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
					'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
				]
			};
		},
		onLoad() {

		},
		onReady() {
			const {
				statusBarHeight,
				windowHeight,
				screenHeight
			} = uni.getSystemInfoSync()

			uni.setStorageSync('statusBarHeight', statusBarHeight)
			this.paddingTop = 44 + uni.getStorageSync('statusBarHeight')
			// console.log(uni.getStorageSync('statusBarHeight'))
		},
		onShow() {
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function(res) {
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 	}
			// });
			this.getProductCategory(this.listKey)
			this.list = []
			getBanner().then(res => {
				// console.log(res)
				res.data.data.map(t => {
					this.list.push({
						pic:t.image,
						proid:t.product_id
					})
				})
			})
			getNoticeList().then(res => {
				this.text = []
				res.data.data.map(t => {
					this.text.push(t.title)
				})
			})
			// 获取项目分类
			getTitleList().then(res => {
				// console.log(res)
				uni.setStorageSync('xmtypelist', res.data.data)
			})
			// #ifdef MP
			const qqmapsdk = new QQMapWX({
				key: 'IPXBZ-BJDEW-O4JRO-RUQEL-JXB6S-QSBZJ'
			});
			// qqmapsdk.reverseGeocoder({
			// 	location: '',
			// 	success: function(res) {
			// 		// console.log(res);
			// 		this.addrname = res.result.address_component.city
			// 	},
			// 	fail: function(res) {
			// 		console.log(res);
			// 	},
			// 	complete: function(res) {
			// 		console.log(res);
			// 	}
			// });
			const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象，若未选择返回null
			if (selectedCity) {
				this.addrname = selectedCity.name
				this.location = selectedCity.location
			}
			// #endif

		},
		onUnload() {
			// #ifdef MP
			citySelector.clearCity();
			// #endif
			// 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
		},
		mounted() {
			this.getCreateData();
		},
		methods: {
			async getCreateData() {
				const res = await homeData({
					page: '1',
					keyword: '',
					lat: "104.06794488430025",
					lng: "30.631890827093013",
					category_id: 1
				})
				this.list1.push(...res.data.data.category)
				this.listKey = this.list1[0].id
				this.getProductCategory(this.listKey)
			},
			async getProductCategory(id) {
				const res = await getProductByCateGory({
					category_id: id,
					type: 1
				})
				this.prolist = res.data.data
				this.prolist.map(t => {
					t.img = t.images.split(',')[0]
				})
			},
			// 首页分类导航
			tabsChange(item) {
				if (this.listKey == item.id) return false;
				this.getProductCategory(item.id)
				this.listKey = item.id;
			},
			clicktoaddr() {
				const key = 'IPXBZ-BJDEW-O4JRO-RUQEL-JXB6S-QSBZJ'; // 使用在腾讯位置服务申请的key
				const referer = '商城'; // 调用插件的app的名称
				const hotCitys = ''; // 用户自定义的的热门城市
				wx.navigateTo({
					url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
				})
			},
			clickto(url) {
				uni.navigateTo({
					url
				})
			},
			// 扫码
			clickscan() {
				uni.scanCode({
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: res.result
						})
					}
				});
			},
			clickswiper(e){
				console.log(this.list[e])
				uni.navigateTo({
					url:'/pages/product/prodetail?title=商品详情&id='+this.list[e].proid
				})
			}
		}

	}
</script>

<style lang="less">
	page {
		background-color: #F7F7F9;
	}

	.u-nav-slot {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #333;
	}

	.fanhui_icon {
		width: 27rpx;
		height: 18rpx;
		margin-left: 6rpx;
	}

	.searchbox {
		width: 690rpx;
		height: 73rpx;
		background: rgba(191, 181, 172, 0.12);
		// opacity: 0.12;
		border-radius: 36rpx;
		line-height: 73rpx;
		padding: 0 25rpx;
		display: flex;
		align-items: center;
		color: #989899;
		font-size: 26rpx;
		padding: 0 30rpx;
		.sousuo_icon {
			width: 34rpx;
			height: 36rpx;
			margin-right: 13rpx;
		}
	}

	/deep/.u-navbar__content {
		justify-content: flex-start;
	}

	.tabbox {
		background-color: #fff;
	}

	.container {
		padding: 23rpx 22rpx 0;

		.probox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-bottom: 150rpx;
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.jsb {
		justify-content: space-between;
	}

	.w344 {
		width: 344rpx;
	}

	.h145 {
		height: 145rpx;
	}
</style>